<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<style type="text/css">
  body,
  html {
    /*去边界*/
    margin: 0px;
    border: 0px;
    padding: 0px;
    height: 100%;
  }



  .titlebar {
    /*标题栏，可拖拽，不可选中*/
    user-select: none;
    -webkit-user-select: none;
    -webkit-app-region: drag;
    height: 40px;
    width: 100%;
    background-color: #555755;
  }

  .titlebar .titleBarBtnSpan {
    /*标题栏按钮区域排版*/
    position: absolute;
    top: 0px;
    height: 40px;
    right: 0px;
    width: 200px;
    text-align: right;
    /*无间隔*/
    font-size: 0;
    -webkit-text-size-adjust: none;
  }

  .titlebar button {
    /*标题栏中的按钮，不可拖拽*/
    -webkit-app-region: no-drag;
    height: 40px;
    width: 40px;
    color: crimson;
    margin: 0px;
    border: 0px;
    padding: 0px;
  }

  #btnUnMax {
    display: none;
  }

  #divContent {
    /*内容区域，绝对定位*/
    position: absolute;
    top: 40px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    /*border-top:1px solid red;*/
    border-left: 1px solid rgb(30, 253, 205);
    border-right: 1px solid rgb(30, 253, 205);
    border-bottom: 1px solid rgb(30, 253, 205);
  }

  div p {
    color: chartreuse;
  }
</style>

<script>
  import { ipcRenderer, remote, BrowserWindow } from 'electron';
  const { Menu, MenuItem, dialog } = remote;

  function KBntClose() {
    //ipcRenderer.send('action', 'exit');
    //console.log('send action exit');
    remote.getCurrentWindow().close();
    console.log('点击关闭')
  }
  function KBtnMax() {
    if (!remote.getCurrentWindow().isMaximized()) {
      remote.getCurrentWindow().maximize();
    }
    console.log('点击最大化')
  }
  function KBtnUnMax() {
    //if(remote.getCurrentWindow().isMaximized()){
    remote.getCurrentWindow().unmaximize();
    //}
    console.log('点击还原')
  }
  function KBtnMin() {
    if (!remote.getCurrentWindow().isMinimized()) {
      remote.getCurrentWindow().minimize();
    }
    console.log('点击最小化')
  }
  function KBtnFullScreen() {
    let bFullScreen = remote.getCurrentWindow().isFullScreen();
    remote.getCurrentWindow().setFullScreen(!bFullScreen);
    console.log('点击全屏')
  }

  // 下面使用的监听虽然十分方便，但是会造成泄漏
  //回调是由主进程引用的, 直到你显式卸载它。 如果不这样做, 每次重新加载窗口时这个回调将再次被安装, 每次重启时都会泄漏一个回调。
  //更糟的是, 由于以前安装的回调的上下文已释放, 因此在发出 close 事件时, 将在主进程中引发异常。
  //为了避免这个问题，请确保清除对传递给主进程的渲染器回调的引用。
  remote.getCurrentWindow().on('maximize', () => {// 最大化
    document.getElementById('btnMax').style.display = "none"
    document.getElementById('btnUnMax').style.display = "inline-block"
    console.log('maximize');
  });
  remote.getCurrentWindow().on('unmaximize', () => {// 向下还原
    document.getElementById('btnMax').style.display = "inline-block"
    document.getElementById('btnUnMax').style.display = "none"
    console.log('maximize');
  });
  remote.getCurrentWindow().on('minimize', () => {// 最小化
    console.log('minimize');
  });
  remote.getCurrentWindow().on('ready-to-show', () => {// 显示
    console.log('show');
    if (!remote.getCurrentWindow().isMaximized()) {
      document.getElementById('btnMax').style.display = "inline-block"
      document.getElementById('btnUnMax').style.display = "none"
    } else {
      document.getElementById('btnMax').style.display = "none"
      document.getElementById('btnUnMax').style.display = "inline-block"
    }
  });

  /////////////////////////////////////////////
  ipcRenderer.on('action', (event, arg) => {
    switch (arg) {
      case 'btnNotify':
        KBtn();
        break;
    }
  });

  function KBtn() {
    let myNotification = new Notification('标题', {
      body: '通知正文内容'
    })

    myNotification.onclick = () => {
      console.log('通知被点击')
    }
  }

  function KNewWin() {
    ipcRenderer.send('action', 'kNewWin');
    console.log('send action kNewWin');

    /*
    let winNew = window.open('http://www.baidu.com');
    setTimeout(() => {
      winNew.close();
    }, 5000);
    */
  }
  function MsgTest() {
    const response = dialog.showMessageBox(remote.getCurrentWindow(), {
      message: 'Do you want to save the current document?',
      type: 'question',
      buttons: ['Yes', 'No']
    });
    console.log('对话框结果：%d', response);
    if (response == 0) {

    }
  }

  function KOpenDevTool() {
    remote.getCurrentWindow().openDevTools();
  }

  /*
    const fs = require('fs');
    //let res = fs.readdirSync('E:\\electronProject\\test\\src\\app.asar\\src\\index.js');
    let res = fs.readFileSync('E:\\electronProject\\test\\src\\app.asar\\src\\index.js');
    console.log(res.toString());

    var $ = require('jquery');
    $.get('file://E:\\electronProject\\test\\src\\app.asar\\src\\index.js', function (data) {
      console.log(data.toString());
    });
  */


</script>

<body style="background-color:transparent;">
  <div class="titlebar">
    <span>测试窗口标题</span>
    <span class="titleBarBtnSpan">
      <button id='btnFullScreen' onclick="KBtnFullScreen()">FULL</button>
      <button id='btnMin' onclick="KBtnMin()">—</button>
      <button id='btnMax' onclick="KBtnMax()">口</button>
      <button id='btnUnMax' onclick="KBtnUnMax()">囙</button>
      <button id='btnClose' onclick="KBntClose()">X</button>
    </span>
  </div>
  <div id="divContent">
    <p>
      <button onclick="KBtn()">发送通知</button>
      <button onclick="KNewWin()">新建窗口</button>
      <button onclick="MsgTest()">消息窗口测试</button>
      <button onclick="KOpenDevTool()">打开调试工具</button>
    </p>
    <p>
      Well hey there!!! We are using io.js
      <!--<webview src="https://www.adobe.com/software/flash/about/" plugins></webview>-->
      <script>document.write(process.version)</script> and Electron
      <script>document.write(process.versions['electron'])</script>.
    </p>
  </div>



</body>

</html>